/*******************************************************************************
 * KindEditor - WYSIWYG HTML Editor for Internet
 * Copyright (C) 2006-2011 kindsoft.net
 *
 * @author Roddy <luolonghao@gmail.com>
 * @site http://www.kindsoft.net/
 * @licence http://www.kindsoft.net/license.php
 *******************************************************************************/

KindEditor.plugin("emoticons", function(K) {
  var self = this,
    name = "emoticons",
    path = self.emoticonsPath || self.pluginsPath + "emoticons/images/",
    allowPreview =
      self.allowPreviewEmoticons === undefined
        ? true
        : self.allowPreviewEmoticons,
    currentPageNum = 1;
  self.clickToolbar(name, function() {
    var rows = 5,
      cols = 9,
      total = 135,
      startNum = 0,
      cells = rows * cols,
      pages = Math.ceil(total / cells),
      colsHalf = Math.floor(cols / 2),
      wrapperDiv = K('<div class="ke-plugin-emoticons"></div>'),
      elements = [],
      menu = self.createMenu({
        name: name,
        beforeRemove: function() {
          removeEvent();
        }
      });
    menu.div.append(wrapperDiv);
    var previewDiv, previewImg;
    if (allowPreview) {
      previewDiv = K('<div class="ke-preview"></div>').css("right", 0);
      previewImg = K(
        '<img class="ke-preview-img" src="' + path + startNum + '.gif" />'
      );
      wrapperDiv.append(previewDiv);
      previewDiv.append(previewImg);
    }
    function bindCellEvent(cell, j, num) {
      if (previewDiv) {
        cell.mouseover(function() {
          if (j > colsHalf) {
            previewDiv.css("left", 0);
            previewDiv.css("right", "");
          } else {
            previewDiv.css("left", "");
            previewDiv.css("right", 0);
          }
          previewImg.attr("src", path + num + ".gif");
          K(this).addClass("ke-on");
        });
      } else {
        cell.mouseover(function() {
          K(this).addClass("ke-on");
        });
      }
      cell.mouseout(function() {
        K(this).removeClass("ke-on");
      });
      cell.click(function(e) {
        self
          .insertHtml('<img src="' + path + num + '.gif" border="0" alt="" />')
          .hideMenu()
          .focus();
        e.stop();
      });
    }
    function createEmoticonsTable(pageNum, parentDiv) {
      var table = document.createElement("table");
      parentDiv.append(table);
      if (previewDiv) {
        K(table).mouseover(function() {
          previewDiv.show("block");
        });
        K(table).mouseout(function() {
          previewDiv.hide();
        });
        elements.push(K(table));
      }
      table.className = "ke-table";
      table.cellPadding = 0;
      table.cellSpacing = 0;
      table.border = 0;
      var num = (pageNum - 1) * cells + startNum;
      for (var i = 0; i < rows; i++) {
        var row = table.insertRow(i);
        for (var j = 0; j < cols; j++) {
          var cell = K(row.insertCell(j));
          cell.addClass("ke-cell");
          bindCellEvent(cell, j, num);
          var span = K('<span class="ke-img"></span>')
            .css("background-position", "-" + 24 * num + "px 0px")
            .css("background-image", "url(" + path + "static.gif)");
          cell.append(span);
          elements.push(cell);
          num++;
        }
      }
      return table;
    }
    var table = createEmoticonsTable(currentPageNum, wrapperDiv);
    function removeEvent() {
      K.each(elements, function() {
        this.unbind();
      });
    }
    var pageDiv;
    function bindPageEvent(el, pageNum) {
      el.click(function(e) {
        removeEvent();
        table.parentNode.removeChild(table);
        pageDiv.remove();
        table = createEmoticonsTable(pageNum, wrapperDiv);
        createPageTable(pageNum);
        currentPageNum = pageNum;
        e.stop();
      });
    }
    function createPageTable(currentPageNum) {
      pageDiv = K('<div class="ke-page"></div>');
      wrapperDiv.append(pageDiv);
      for (var pageNum = 1; pageNum <= pages; pageNum++) {
        if (currentPageNum !== pageNum) {
          var a = K('<a href="javascript:;">[' + pageNum + "]</a>");
          bindPageEvent(a, pageNum);
          pageDiv.append(a);
          elements.push(a);
        } else {
          pageDiv.append(K("@[" + pageNum + "]"));
        }
        pageDiv.append(K("@&nbsp;"));
      }
    }
    createPageTable(currentPageNum);
  });
});
